<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<link href="/static/layui/css/layui.css" rel="stylesheet">
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<!-- 引入 layui.js -->
		<script src="/static/layui/layui.js"></script>
		<style>
			.demo-reg-container {
				width: 320px;
				margin: 180px auto 0;
			}

			.demo-reg-other .layui-icon {
				position: relative;
				display: inline-block;
				margin: 0 2px;
				top: 2px;
				font-size: 26px;
			}
		</style>
	</head>
	<body>
		<form class="layui-form">
			<div class="demo-reg-container">
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-username"></i>
						</div>
						<input type="text" name="account_number" value="" lay-verify="required" placeholder="账号"
							lay-reqtext="请填写账号" autocomplete="off" class="layui-input" lay-affix="clear">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-password"></i>
						</div>
						<input type="password" name="password" value="" lay-verify="required" placeholder="密码"
							autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-password"></i>
						</div>
						<input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword"
							placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-username"></i>
						</div>
						<input type="text" name="username" value="" lay-verify="required" placeholder="昵称"
							autocomplete="off" class="layui-input" lay-affix="clear">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-row">
						<div class="layui-col-xs7">
							<div class="layui-input-wrap">
								<div class="layui-input-prefix">
									<i class="layui-icon layui-icon-email"></i>
								</div>
								<input type="email" name="mailbox" value="" lay-verify="required" placeholder="QQ邮箱"
									lay-reqtext="请输入QQ邮箱" autocomplete="off" class="layui-input" id="reg-cellphone">
							</div>
						</div>
						<div class="layui-col-xs5">
							<div style="margin-left: 11px;">
								<button type="button" class="layui-btn layui-btn-fluid layui-btn-primary"
									id="btn1">获取验证码</button>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-wrap">
						<div class="layui-input-prefix">
							<i class="layui-icon layui-icon-vercode"></i>
						</div>
						<input type="number" name="vercode" value="" lay-verify="required" placeholder="验证码"
							lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
				</div>
				<div class="layui-form-item demo-reg-other">
					<a href="{:url('Login/login')}">登录已有帐号</a>
				</div>
			</div>
		</form>
		<div style="position: absolute;bottom: 0px;width:100%;height: 40px;background-color: gainsboro;line-height: 40px;text-align: center;">
			备案号：<a href="https://beian.miit.gov.cn/" target="_blank">1234567890</a>
		  </div>
		<script type="text/javascript">
			$(document).ready(function() {
				$('#btn1').click(function() {
					var yx = $("#reg-cellphone").val();
					$.ajax({
						url: '{:url("Login/email")}',
						type: 'get',
						data: yx,
						dataType: 'json',
						success: function(data) {
							if (data.code === 200) {
								layer.msg(data.msg, {icon: 1},{time:10});
							} else {
								layer.msg(data.msg,{
									icon: 0
								}, {
									time: 3000
								});
							}
						}
					});
				});
			});
			layui.use(['element', 'form'], function() {
				var element = layui.element;
				var form = layui.form;
				var layer = layui.layer;
				form.on('submit(demo-reg)', function(data) {
					//var field = data.field; // 获取表单字段值
					$.ajax({
						type: 'post',
						url: '{:url("Login/registerData")}', // 假设表单有action属性
						data: data.field, // 自动序列化表单元素为字符串
						dataType: 'json',
						success: function(data) {
							if (data.code == 200) {
								layer.msg(data.msg, {
									time: 500
								}, function() {
									window.location.href = "{:url('Login/login')}"
								});
							} else {
								layer.msg(data.msg, {
									time: 6000
								});
							}
						}
					});
					return false; // 阻止默认 form 跳转
				});
			});
		</script>
	</body>
</html>